<template>
  <div>
    <el-form :model="searchList" ref="form" size="normal">
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="">
            <el-input v-model="searchList.name" placeholder="单位名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="">
            <el-input v-model="searchList.project_name" placeholder="项目名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="search" :loading="loading">查询</el-button>
            <el-button type="primary" size="medium" @click="exportSelection" :loading="loading">导出选择项</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="tableData" border stripe v-loading="loading" height="400px" ref="tableData">
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="name" label="单位名称">
      </el-table-column>
      <el-table-column prop="project_name" label="项目名称">
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="exportItem(row.id)">导出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 报告导出模板 -->
    <verify-report-item ref="verifyReport" v-show="false"></verify-report-item>
  </div>
</template>
<script>
import VerifyReportItem from '@/components/Report/VerifyReport'
export default {
  name: 'ThirdReport',
  components: {
    VerifyReportItem
  },
  props: {

  },
  data () {
    return {
      loading: false,
      searchList: {},
      tableData: [],
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('exportVerifyList', {
        status: '4',
        ...this.searchList
      })
      this.tableData = res
      this.loading = false
    },
    search () {
      this.init()
    },
    exportSelection () {
      if (this.$refs.tableData.selection.length <= 0) {
        this.$tips.error('请选择至少一条')
        return false
      }
      let ids = []
      this.$refs.tableData.selection.forEach(item => {
        ids.push(item.id)
      })
      this.loading = true
      for (var i = 0; i < ids.length; i++) {
        this.loop(ids[i], i, ids.length)
      }
    },
    loop (val, i, len) {
      setTimeout(() => {
        this.$refs.verifyReport.word(val)
        if (i === (len - 1)) {
          this.loading = false
          this.$tips.success('导出完成')
        }
      }, (i + 1) * 1000)
    },
    async exportItem (id) {
      this.loading = true
      await this.$refs.verifyReport.word(id)
      this.$tips.success('导出完成')
      this.loading = false
    }
  },
  computed: {

  }
}
</script>
<style lang='scss' scoped>
</style>
